import {useEffect, useState} from "react";
import { Modal, Descriptions } from 'antd';
import {getOrderDetail} from "@/services/ant-design-pro/order";
import ProSkeleton from '@ant-design/pro-skeleton';

const OrderDetailsModal = (props) => {
    const {visible,setVisible ,show ,id} = props;
    const [orderDetail,setOrderDetail] = useState({})
    useEffect(async ()=>{
        let data = await getOrderDetail(id)
        setOrderDetail(data)

    },[])

    return (
        <Modal
            width={800}
            visible={ visible  }
            title="订单信息"
            footer={false}
            onCancel={()=>{ setVisible(false) }}
        >
			{ visible ?
				<div>
					<Descriptions
						title="收货信息"
						column={2}
						style={{borderBottom:'1px solid #ccc',marginBottom:'10px'}}
						contentStyle={{color:'#666'}}
						labelStyle={{color:'#666'}}
					>
						<Descriptions.Item label="用户昵称">{orderDetail.user?.nickname}</Descriptions.Item>
						<Descriptions.Item label="收货人">{orderDetail.user_name}</Descriptions.Item>
						<Descriptions.Item label="联系电话">{orderDetail.user_phone}</Descriptions.Item>
						<Descriptions.Item label="收获地址">{orderDetail.user_address}</Descriptions.Item>
					</Descriptions>

					<Descriptions
						contentStyle={{color:'#666'}} labelStyle={{color:'#666'}}
						title="订单信息"
						column={2}
					>
						<Descriptions.Item label="订单ID">{orderDetail.order_number}</Descriptions.Item>
						<Descriptions.Item label="订单状态">{orderDetail.status_text}</Descriptions.Item>
						<Descriptions.Item label="商品总数">{orderDetail.total_num}</Descriptions.Item>
						<Descriptions.Item label="商品总价">{orderDetail.total_price}</Descriptions.Item>
						<Descriptions.Item label="交付邮费">{orderDetail.pay_postage}</Descriptions.Item>
						<Descriptions.Item label="优惠券金额">{orderDetail.coupon_price}</Descriptions.Item>
						<Descriptions.Item label="会员商品优惠">{orderDetail.orderEconomize?.member_price}</Descriptions.Item>
						<Descriptions.Item label="积分抵扣">{orderDetail.use_integral}</Descriptions.Item>
						<Descriptions.Item label="实际支付">{orderDetail.pay_price}</Descriptions.Item>
						<Descriptions.Item label="创建时间">{orderDetail.created_at}</Descriptions.Item>
						<Descriptions.Item label="支付时间">{orderDetail.pay_time}</Descriptions.Item>
						<Descriptions.Item label="支付方式">{orderDetail.pay_type_text}</Descriptions.Item>
						<Descriptions.Item label="推广人">{orderDetail.promoter?.nickname}</Descriptions.Item>
					</Descriptions>
					{ show ?
						<Descriptions style={{borderTop:'1px solid #ccc',paddingTop:'10px'}} title="退款信息" column={2}>
							<Descriptions.Item label="退款原因">{orderDetail.refund_reason_wap_explain}</Descriptions.Item>
							<Descriptions.Item label="退款状态">{orderDetail.refund_status_text}</Descriptions.Item>
							<Descriptions.Item label="备注说明">{orderDetail.mark}</Descriptions.Item>
						</Descriptions>
						: ''}
				</div>
				:  <ProSkeleton type="result" />
			}
        </Modal>
        );
};

export default OrderDetailsModal;
